import { Table, Tag, message as AntMessage, Tooltip } from 'ant-design-vue'
import { h, ref } from 'vue'
import { CopyOutlined } from '@ant-design/icons-vue'

// 颜色方案设计：
// 90-100%: 绿色 - 最优选择
// 70-89%:  蓝色 - 较好选择
// 50-69%:  橙色 - 一般选择
// 0-49%:   红色 - 不推荐选择

const getRecommendationStyle = (percentage) => {
  console.log('🐯 ~ getRecommendationStyle ~ percentage:', percentage)
  // 移除百分号并转为数字
  const value = parseInt(percentage.replace('%', ''))

  if (value >= 60) {
    return {
      color: '#2BC155', // 文字颜色
      bgColor: '#E6F8ED', // 背景色
      borderColor: '#B7EBCD', // 边框色
    }
  } else if (value >= 40) {
    return {
      color: '#FF9900', // 文字颜色
      bgColor: '#FFF7E6', // 背景色
      borderColor: '#FFE7B2', // 边框色
    }
  } else {
    return {
      color: '#FF4D4F', // 文字颜色
      bgColor: '#FFF1F0', // 背景色
      borderColor: '#FFCCC7', // 边框色
    }
  }
}

const transformHSData = (raw) => {
  return raw.map((group, groupIndex) => {
    const [parent, ...items] = group
    const [hsCode, name] = parent.章节.split('\t')
    const similarity = (parent.相似度 * 100).toFixed(0) + '%'

    return {
      key: `${groupIndex}`,
      name: name?.trim() ?? '',
      hsCode: hsCode?.trim() ?? '',
      recommendation: similarity,
      subItems: items.map((item, itemIndex) => ({
        // 改用 subItems 而不是 children
        key: `${groupIndex}-${itemIndex}`,
        values: Object.entries(item).map(([k, v]) => ({
          key: k,
          value:
            v === null || v === undefined || (typeof v === 'number' && isNaN(v))
              ? '--'
              : typeof v === 'string'
                ? v.replace(/\n/g, ' ')
                : typeof v === 'number'
                  ? v.toString()
                  : JSON.stringify(v),
        })),
      })),
    }
  })
}

const generateSubColumns = ({ record }) => {
  if (!record?.subItems?.length) return []
  const keys = record.subItems[0].values.map((v) => v.key)

  // 先生成所有列的配置
  const columnsConfig = keys.map((key) => ({
    title: key,
    dataIndex: key,
    key,
    align: key === '申报要素(出口)' || key === '申报要素(进口)' ? 'left' : 'center',
    customHeaderCell: () => ({ style: { textAlign: 'center' } }),

    // 设置固定列和宽度
    fixed: key === '商品编码' || key === '编码名称' ? 'left' : undefined,
    width:
      key === '商品编码' ||
      key === '相似度' ||
      key === '进口普通税率' ||
      key === '进口最惠国税率' ||
      key === '退税率'
        ? 120
        : key === '编码名称'
          ? 300
          : key === '申报要素(出口)'
            ? 400
            : key === '申报要素(进口)'
              ? 400
              : undefined, // 其他列默认200宽度
    customRender: ({ text }) => {
      if (key === '编码名称') {
        return h('div', { class: 'flex items-center' }, [
          h('span', text),
          h(
            Tooltip,
            { title: '复制', arrow: false },
            {
              default: () =>
                h(CopyOutlined, {
                  class:
                    'ml-2 !text-gray-400 cursor-pointer hover:!text-gray-700 active:!scale-90 ',
                  onClick: async (e) => {
                    e.stopPropagation()
                    try {
                      await navigator.clipboard.writeText(text)
                      AntMessage.success('复制成功')
                    } catch {
                      AntMessage.error('复制失败')
                    }
                  },
                }),
            },
          ),
        ])
      }
      if (key === '相似度') {
        console.log('🐯 ~ returnkeys.map ~ key:', key)
        const style = getRecommendationStyle((parseFloat(text) * 100).toFixed(0) + '%')
        return h(
          Tag,
          {
            class: '!px-3 !py-1',
            style: {
              color: style.color,
              backgroundColor: style.bgColor,
              borderColor: style.borderColor,
            },
          },
          () => (parseFloat(text) * 100).toFixed(0) + '%',
        )
      }
      if (key === '退税率') {
        return text + '%'
      }
      return text
    },
  }))

  // 定义列的顺序
  const columnOrder = [
    '商品编码',
    '编码名称',
    '相似度',
    '申报要素(出口)',
    '申报要素(进口)',

    // ... 其他列按原顺序
  ]

  // 重新排序列
  const orderedColumns = [
    // 先放入固定顺序的列
    ...columnOrder.map((key) => columnsConfig.find((col) => col.key === key)).filter(Boolean),
    // 再放入其他未指定顺序的列
    ...columnsConfig.filter((col) => !columnOrder.includes(col.key)),
  ]

  return orderedColumns
}

const getSubData = ({ record }) => {
  console.log('🐯 ~ getSubData ~ record:', record)
  // console.log(record.children.map((child) => {
  //   const obj = { key: child.key }
  //   child.values.forEach(({ key, value }) => {
  //     obj[key] = value
  //   })
  //   return obj
  // }));

  return record.subItems.map((item) => {
    const obj = { key: item.key }
    item.values.forEach(({ key, value }) => {
      obj[key] = value
    })
    return obj
  })
}

// 表格列定义
const columns = [
  {
    title: 'HS编码',
    dataIndex: 'hsCode',
    key: 'hsCode',
    width: 100,
    align: 'center',
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    customHeaderCell: () => ({
      style: {
        textAlign: 'center', //头部单元格水平居中
      },
    }),
  },
  {
    title: '推荐指数',
    dataIndex: 'recommendation',
    key: 'recommendation',
    width: 100,
    align: 'center',
    customRender: ({ text }) => {
      const style = getRecommendationStyle(text)
      return h('div', { class: 'flex items-center justify-center gap-1' }, [
        h(
          Tag,
          {
            class: '!px-3 !py-1',
            style: {
              color: style.color,
              backgroundColor: style.bgColor,
              borderColor: style.borderColor,
            },
          },
          () => text,
        ),
      ])
    },
  },
]

// const dataSource = [
//   {
//     key: '1',
//     hsCode: '847130',
//     name: '电话机，包括用于蜂窝网络或其他无线网络的智能手机及其他电话机；其他发送或接收声音、图像或其他数据用的设备，包括有线或无线网络（例如，局域网或广域网）的通信设备，但税目84.43、85.25、85.27或85.28的发送或接收设备除外：',
//     recommendation: '95%',
//   },

//   {
//     key: '2',
//     hsCode: '854231',
//     name: '无线电广播、电视发送设备，不论是否装有接收装置或声音的录制、重放装置；电视摄像机、数字照相机及视频摄录一体机：',
//     recommendation: '90%',
//   },
// ]

// const subColumns = [
//   { title: 'HS编码', dataIndex: 'hsCode', key: 'hsCode', align: 'center', width: 100 },
//   {
//     title: '名称',
//     dataIndex: 'name',
//     key: 'name',
//     customHeaderCell: () => ({ style: { textAlign: 'center' } }),
//     customRender: ({ text }) =>
//       h('div', { class: 'flex items-center' }, [
//         h('span', text),
//         h(
//           Tooltip,
//           { title: '复制', arrow: false },
//           {
//             default: () =>
//               h(CopyOutlined, {
//                 class: 'ml-2 !text-gray-400 cursor-pointer hover:!text-gray-700 active:!scale-90 ',
//                 onClick: async (e) => {
//                   e.stopPropagation()
//                   try {
//                     await navigator.clipboard.writeText(text)
//                     AntMessage.success('复制成功')
//                   } catch {
//                     AntMessage.error('复制失败')
//                   }
//                 },
//               }),
//           },
//         ),
//       ]),
//   },
//   { title: '退税率', dataIndex: 'taxRate', key: 'taxRate', align: 'center', width: 100 },
//   {
//     title: '推荐指数',
//     dataIndex: 'recommendation',
//     key: 'recommendation',
//     align: 'center',
//     width: 100,
//     customRender: ({ text }) => {
//       const style = getRecommendationStyle(text)
//       return h('div', { class: 'flex items-center justify-center gap-1' }, [
//         h(
//           Tag,
//           {
//             class: '!px-3 !py-1',
//             style: {
//               color: style.color,
//               backgroundColor: style.bgColor,
//               borderColor: style.borderColor,
//             },
//           },
//           // 修改这里：使用函数形式返回内容
//           () => text,
//         ),
//       ])
//     },
//   },
//   {
//     title: '申报要素',
//     dataIndex: 'elements',
//     key: 'elements',
//     customHeaderCell: () => ({ style: { textAlign: 'center' } }),
//   },
// ]

// const subData = [
//   {
//     key: '1-1',
//     hsCode: '8517691001',
//     name: ' 69   其他 编码描述：用于呼叫、提示和寻呼的便携式接收器',
//     taxRate: '13%',
//     recommendation: '80%',
//     elements:
//       '1.品牌类型 2.出口享惠情况 3.用途 4.功能 5.品牌（中文或外文名称） 6.型号 7.GTIN 8.CAS 9.其他',
//   },
//   {
//     key: '2-1',
//     hsCode: '8517629400',
//     name: ' 62   接收、转换并且发送或再生声音、图像或其他数据用的设备，包括交换及路由设备 编码描述：无线耳机',
//     taxRate: '9%',
//     recommendation: '60%',
//     elements: '1.无线网卡；2.笔记本电脑用；3.无线网络连接信号转换；4.无线网络；5.××牌；6.型号：××',
//   },
//   {
//     key: '3-1',
//     hsCode: '8517621100 ',
//     name: ' 62 接收、转换并且发送或再生声音、图像或其他数据用的设备，包括交换及路由设备 编码描述：局用电话交换机、长途电话交换机、电报交换机,数字式',
//     taxRate: '9%',
//     recommendation: '30%',
//     elements: '1.无线网卡；2.笔记本电脑用；3.无线网络连接信号转换；4.无线网络；5.××牌；6.型号：××',
//   },
// ]

// 返回渲染函数
export const renderHSTable = (raw) => {
  const dataSource = transformHSData(raw)
  console.log('🐯 ~ renderHSTable ~ dataSource:', dataSource)

  return () =>
    h('div', { class: 'w-full overflow-x-auto' }, [
      h('div', { class: 'mb-4 font-bold' }, '好的，下面是建议申报信息：'),
      h(Table, {
        columns,
        dataSource,
        pagination: false,
        bordered: true,
        expandedRowRender: (record) =>
          h(Table, {
            columns: generateSubColumns(record),
            dataSource: getSubData(record),
            pagination: false,
            bordered: true,
            size: 'small',
            scroll: { x: 'max-content' }, // 添加横向滚动
          }),
        rowExpandable: (record) => record && record.subItems?.length > 0,
      }),
    ])
}
